<!-- 公共部分 复用 -->

<template>
    <div class="main">
        <!-- 位于水平线 -->
        <el-menu :default-active="$route.path" active-text-color="#0000CD" text-color="#2F4F4F"
            background-color="#F5FFFA" class="el-menu-demo" mode="horizontal" router @select="handleSelect">
            <el-menu-item index="/onlineclass">在线课堂</el-menu-item>
            <el-menu-item index="/testWork">测试作业</el-menu-item>
            <el-menu-item index="/loadppt">课件下载</el-menu-item>
            <el-menu-item index="/discuss">课后讨论</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: ""
            };
        },
        watch: {
            $route() {
                this.handleSelect(this.activeIndex)
            }
        },
        methods: {

            // 获取当前改变的index
            handleSelect(index) {
                this.activeIndex = index
            }
        }
    }
</script>

<style scoped lang="less">
    .main{
        margin-bottom: 15px;
    }
    .el-menu-demo {
        padding: 0 60px;
        display: flex;
        justify-content: space-between;

        .el-menu-item {
            font-size: 20px;
        }
    }
</style>